<template>
  <div class="m-hot-list">
    <div class="add-btn">
      <w-button @on-click="onToUpdate('')">新增热点</w-button>
    </div>
    <div class="m-list">
      <w-table :columns="columns" :has-data="hasData">
        <tr v-for="(list, listIndex) in hotList.recordList" :key="listIndex">
          <td>
            <div>
              <w-checkbox :label="`list${listIndex}`" name="list" v-model="list.checked" @on-change="_setStoreToAllCheck"></w-checkbox>
            </div>
          </td>
          <td>
            <span class="sequence">{{list.sequence}}</span>
          </td>
          <td>
            <span>{{list.title}}</span>
          </td>
          <td>
            <span>{{list.typeName}}</span>
          </td>
          <td>
            <div class="cur options">
              <span @click="onToUpdate(list)">编辑</span>
              |
              <span @click="onDel(list.id)">删除</span>
            </div>
          </td>
        </tr>
      </w-table>
      <!-- 操作 -->
      <div class="clearfix m-options" v-if="hotList.totalCount">
        <div class="fl">
          <div class="checkbox">
            <w-checkbox :label="`all`" name="all" v-model="allPage" @on-change="onSelectedAll">本页全选</w-checkbox>
          </div>
          <span class="cur options" @click="onDel('')">删除</span>
        </div>
        <div class="fr" v-if="hotList.pageCount > 1">
          <w-paging :current="hotList.currentPage" :total="hotList.pageCount" @on-page="onChangePage"></w-paging>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { apiHotNewMange } from 'js/api'
import { mapGetters } from 'vuex'
import { session } from 'js/util'

export default {
  data() {
    return {
      columns: [
        {title: '', width: '3%'},
        {title: '排序', width: '10%'},
        {title: '标题', width: '36%'},
        {title: '所属热点', width: 'auto'},
        {title: '操作', width: '20%'}
      ],
      allPage: false, // 本页全选
      params: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        currentPage: 1,
        showCount: 10
      },
      hotList: {},
      hasData: true
    }
  },
  computed: {
    ...mapGetters(['token'])
  },
  created() {
    this.fetchHotNewsList()
  },
  methods: {
    /**
     * 获取热点头条列表
     */
    fetchHotNewsList() {
      this.params.accessToken = this.token
      apiHotNewMange.apiHotNewsList(this.params).then(data => {
        this.hotList = data.data || {}
        if (this.hotList.recordList && this.hotList.recordList.length) {
          this.hotList.recordList.forEach(v => {
            this.$set(v, 'checked', this.allPage)
          })
          this.hasData = true
        } else {
          this.hasData = false
        }
      })
    },
    /**
     * 分页
     */
    onChangePage(page) {
      this.params.currentPage = page
      this.allPage = false
      this.fetchHotNewsList()
    },
    /**
     * 新增/编辑
     */
    onToUpdate(info) {
      if (info) {
        const hotInfo = {
          docType: info.docType,
          title: info.title,
          subtitle: info.subtitle,
          sequence: info.sequence,
          coverPath: info.coverPath,
          // 头条
          typeName: info.typeName,
          typeId: info.typeId
        }
        session.set('hotNewsInfo', hotInfo)
        this.$router.push(`add?three=${this.$route.query.three}&hotid=${info.id}`)
      } else {
        this.$router.push(`add?three=${this.$route.query.three}`)
      }
    },
    /**
     * 全选切换
     */
    onSelectedAll(checked) {
      console.log(checked)
      if (checked) {
        this.hotList.recordList.forEach(list => {
          list.checked = true
        })
      } else {
        this.hotList.recordList.forEach(list => {
          list.checked = false
        })
      }
    },
    // 判断选中商户的个数，是否和展示的长度相同，true相同，则选中全部，false全部取消
    _setStoreToAllCheck() {
      const storeList = this.hotList.recordList
      let aStore = storeList.filter(item => {
        return item.checked === true
      })
      if (aStore.length === storeList.length) {
        this.allPage = true
      } else {
        this.allPage = false
      }
    },
    /**
     * 删除
     */
    onDel(ids) {
      let arr = [] 
      if (ids) {
        arr.push(ids)
      } else {
        if (this.hotList.recordList && this.hotList.recordList.length) {
          this.hotList.recordList.forEach(item => {
            if (item.checked) {
              arr.push(item.id)
            }
          })
        }
      }
      if (arr.length == 0) {
        this.$toast('请选择要删除的热点')
        return
      }
      let _this = this
      this.$modal({
        content: '确认删除？',
        onConfirm() {
          apiHotNewMange.apiHotTypeDel(_this.token, arr, _this.$route.query.three || '').then(data => {
            _this.$toast('删除成功', () => {
              _this.fetchHotNewsList()
            })
          })
        }
      })
    }
  }
}
</script>

<style lang="scss">
.m-hot-list {
  .add-btn {
    .btn {
      width: 140px;
    }
  }
  .table {
    td {
      height: 50px;
      border-right: 1px solid #e0e0e0;
      &:first-child {
        border-right: none
      }
    }
  }
}
</style>


<style lang="scss" scoped>
.add-btn {
  margin: 20px 0;
}
.m-list {
  .sequence {
    padding-left: 5%;
  }
  .options {
    color: #2D8EFE;
  }
  .m-options {
    margin: 20px 0 0 8px;
    .checkbox {
      display: inline-block;
      margin-right: 20px;
    }
  }
}
</style>
